<template>
  <div id="evaluate">
    <c-title :hide="false" text="评价"></c-title>
    <div class="shop-goods">
      <div class="goods flex">
        <div class="img flex"><img :src="good.thumb" /></div>
        <div class="wrap flex">
          <div class="goods-title  flex-j-sb ">
            <div class="ell">{{ good.title }}</div>
            <div>{{ $i18n.t("money") }}{{ good.price }}</div>
          </div>
          <div class="goods-size flex-j-sb flex-a-c">
            <div  :class="!good.goods_option_title?'goods-hide':''">规格：{{ good.goods_option_title }}</div>
            <div>x{{ good.total }}</div>
          </div>
        </div>
      </div>
      <!--评论-->
      <div class="comment">
        <h3>评论：</h3>
        <van-cell-group>
          <van-field v-model="comment" type="textarea" placeholder="请输入评论内容~" rows="2" />
        </van-cell-group>
        <div class="print">
          <h3>晒图：</h3>
          <div class="print-img flex">
            <template v-for="(val, index) in fileList4">
              <div class="photobox flex" :key="index" style="max-width: 5.625rem;">
                <img :src="val" style="max-width: 5.625rem;" />
                <span class="iconfont icon-a-zu648" @click="removeImg_1(index)"></span>
              </div>
            </template>
            <div class="img-upload flex">
              <van-uploader :disabled="fileList4.length >= 5" :after-read="multipleMethod_1" multiple>
                <div class="upload flex-a-c flex-j-c">
                  <div class="crucifix" ></div>
                </div>
              </van-uploader>
            </div>
            
          </div>
          <div class="print-rate flex-a-c flex-j-sb" >
            <h4>评分：</h4>
            <van-rate v-model="level" @change="getStar"  :size="20" :color="'var(--themeBaseColor)' || '#E32323'"/>
          </div>
        </div>
      </div>
      <!--描述等等-->
      <!--v-if="is_score_latitude"-->
      <div class="score-box" v-if="is_score_latitude">
        <div class="score-item flex-a-c flex-j-sb"><h3>描述/包装</h3><van-rate v-model="describeScore" :size="20" :color="'var(--themeBaseColor)' || '#E32323'" /></div>
        <div class="score-item flex-a-c flex-j-sb"><h3>物流服务/配送</h3><van-rate v-model="deliveryScore" :size="20" :color="'var(--themeBaseColor)' || '#E32323'" /></div>
        <div class="score-item flex-a-c flex-j-sb"><h3>服务态度/质量</h3><van-rate v-model="serviceScore" :size="20" :color="'var(--themeBaseColor)' || '#E32323'" /></div>
      </div>
      <div class="mh-90"></div>
      <div class="evaluate-btn" @click="toComment(good)">提交评价</div>
    </div>
  </div>
</template>
<script>
import order_list_evaluatecontroller from "./evaluatecontroller";
export default order_list_evaluatecontroller;
</script>
<style scoped>
  .comment ::v-deep .van-field {
    background-color: #F5F5F5;
    padding:0.75rem;
    border-radius: 0.25rem;
  }
  .print-img ::v-deep .van-uploader__wrapper {
    border-radius: 0.25rem;
  }
  ::v-deep .van-field__control::-webkit-input-placeholder {
    color: #666;
  }
  .pcStyle .shop-goods .evaluate-btn {
    left:auto;
  }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
  .ell {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 定义显示的行数 */
    overflow: hidden;
  }
  .mh-90 {
    height: 5.625rem;
    clear: both;
  }
  .goods-hide {
    visibility: hidden;
  }
  
  .shop-goods {
    margin:0.5rem 0.75rem 0 0.75rem;
    .goods {
      border-radius: 0.5rem;
      background-color: #FFFFFF;
      padding:0.75rem;
      .img {
        // flex: 3;
        background: rgba(0,0,0,0);
        margin:0 0.25rem 0 0;
        img {
          // width:100%;
          width:4.375rem;
          height: 4.375rem;
          margin:0;
          border-radius: 0.25rem;
        }
      }
      
      .wrap {
        flex:2;
        flex-direction: column;
        
        .goods-title {
          width:100%;
          
          div {
            font-size: 0.8125rem;
            color: #333333;
            line-height: 1.1875rem;
            text-align: left;
          }
          :last-child {
            font-weight: bold;
            min-width:38%;
            text-align: right;
          }
        }
        .goods-size {
          width:100%;
          padding:0.5rem 0 0 0;
          font-size: 0.75rem;
          color: #999999;
          line-height: 1.0625rem;
        }
      }
    }
    .comment {
      margin:0.5rem 0 0 0;
      background-color: #fff;
      border-radius: 0.5rem;
      padding:0.75rem;
      h3 {
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: #333333;
        padding:0 0 0.75rem 0;
        font-weight: 400;
        text-align: left;
      }
      .print {
        h3 {
          padding:1.25rem 0 0.75rem 0;
        }
        .print-img {
          flex-wrap: wrap;
        }
        .photobox {
          width: 5.625rem;
          flex-wrap: wrap;
          margin:0 1rem 1rem 0;
          position: relative;
          img {
            margin:0;
            border-radius: 0.25rem;
            height: 5.625rem;
          }
          .icon-a-zu648 {
            color:#A0A1A7;
            position: absolute;
            top:-0.025rem;
            right:-0.875rem;
            transform: translate(-50%,-50%);
            z-index: 5;
            width:0.9375rem;
            height: 0.9375rem;
            background-color: #fff;
            border-radius: 50%;
          }
        }
        .img-upload {
          position: relative;
          margin:0 0 1rem 0;
          .upload {
            width: 5.625rem;
            height: 5.625rem;
            border-radius: 0.25rem;
            background-color: #F5F5F5;
            position: relative;
            .crucifix {
              /* 十字架样式 */
              width: 1.375rem;
              height: 0.125rem;
              background: #b2b2b2;
              border-radius: 0.625rem;
              position: relative;

              &::after {
                content: "";
                width: 1.375rem;
                height: 0.125rem;
                background: #b2b2b2;
                border-radius: 0.625rem;
                position: absolute;
                transform: rotate(-90deg);
                left: 0;
              }
            }
          }
        }
        .print-rate {
          padding:0.25rem 0 0 0;
          h4 {
            font-size: 0.875rem;
            line-height: 1.25rem;
            color: #333333;
            font-weight: 400;
          }
        }
      }
    }
    .score-box {
      margin:0.5rem 0 0 0;
      background-color: #FFFFFF;
      border-radius: 0.5rem;
      padding:0.75rem;
      .score-item {
        padding: 0 0 0.75rem 0;
        &:last-child {
          padding:0;
        }
        h3 {
          font-size: 0.875rem;
          font-weight: 400;
          line-height: 1.25rem;
          color: #333333;
        }
      }
      
    }
    .evaluate-btn {
      width: 21.875rem;
      background-color:var(--themeBaseColor);
      border-radius: 0.25rem;
      margin:0 0.75rem;
      padding:0.625rem 0;
      position: fixed;
      bottom:0.875rem;
      left:0;
      z-index: 9;
      font-size: 0.875rem;
      font-weight: bold;
      line-height: 1.25rem;
      color: #FFFFFF;
    }
  }
// #evaluate {
//   #shop {
//     background: #fff;
//     padding: 0.625rem 0 0 0;
//   }

//   .goods::after {
//     content: "";
//     display: block;
//     clear: both;
//   }

//   .goods {
//     /* display: flex;
// 		align-items: stretch;
// 		flex-flow: row wrap;
// 		background: #efeded;
// 		padding: 5px;
// 		margin-bottom: 5px;
// 		.img {
// 			flex: 3;
// 			img {
// 				width: 100%;
// 			}
// 		}
// 		.inner {
// 			flex: 5;
// 			padding: 0 5px;
// 			display: flex;
// 			flex-direction: column;
// 			align-items: flex-start;
// 		}
// 		.name {
// 			flex: 5;
// 			text-align: left
// 		}
// 		.price {
// 			flex: 2;
// 			align-items: center;
// 		} */

//     display: flex;
//     width: 100%;
//     box-sizing: border-box;
//     background: #fafafa;

//     .img {
//       width: 6rem;
//       height: 6rem;
//       padding: 0.875rem;
//       display: inline-block;

//       /* background:blue; */
//       img {
//         width: 100%;
//       }
//     }

//     .warp {
//       width: 70vw;
//       padding: 0.625rem 1rem 0 0;
//       display: inline-block;

//       .inner {
//         width: 70%;
//         float: left;
//         box-sizing: border-box;
//         padding: 0 0.625rem;
//         text-align: left;

//         .name {
//           text-align: left;
//           color: #333;
//           margin-bottom: 0.625rem;
//           font-size: 14px;
//         }
//       }

//       .price {
//         width: 30%;
//         align-items: center;
//         text-align: right;
//         color: #333;
//         box-sizing: border-box;
//         float: left;

//         p {
//           margin-top: 0;
//         }
//       }
//     }

//     .product_price {
//       margin-bottom: 0.625rem;
//       font-size: 14px;
//     }

//     .option {
//       color: #8c8c8c;
//       font-size: 12px;
//       flex: 1;
//     }
//   }

//   #pjall {
//     background: #fff;
//     padding: 0.625rem 0.875rem;

//     .upfile {
//       text-align: left;
//       margin-top: 0.625rem;

//       li {
//         width: 20vw;
//         float: left;
//         height: 20vw;
//         line-height: 20vw;
//       }

//       i {
//         font-size: 1rem;
//         border: 0.0625rem dashed #919191;
//         font-weight: normal;
//         color: #919191;
//         padding: 0.625rem;
//       }

//       img {
//         width: 100%;
//       }
//     }

//     textarea {
//       width: 87%;
//       margin-top: 0.625rem;
//       padding: 0.625rem;
//     }

//     #pj {
//       text-align: left;

//       span {
//         float: left;
//         font-size: 14px;
//         padding-right: 0.625rem;
//       }

//       .van-rate {
//         float: right;
//       }
//     }

//     .van-cell-group {
//       border: 1px solid #bfcbd9;
//       border-radius: 4px;

//       .van-cell {
//         border-radius: 4px;
//       }
//     }
//   }

//   button {
//     width: 90%;
//     margin-top: 1.25rem;
//     height: 2.25rem;
//   }

//   .submit-tbn {
//     button {
//       width: 90%;
//       background-color: #f15353;
//       height: 2.875rem;
//       border-radius: 0.25rem;
//       font-size: 16px;
//       color: #fff;
//       border: none;
//     }
//   }

//   .score-box {
//     margin-top: 0.625rem;
//     background: #fff;
//     padding: 0.625rem 0.875rem;

//     .score-item {
//       display: flex;
//       align-items: center;
//       justify-content: space-between;
//       margin: 0.625rem 0;
//     }
//   }

//   .photobox {
//     position: relative;
//     width: 5rem;
//     height: 5rem;
//     border: 1px dashed #c0ccda;

//     /* float: left; */
//     margin-right: 0.2rem;
//     margin-left: 0.2rem;
//     margin-bottom: 0.2rem;

//     img {
//       width: 100%;
//       height: 100%;
//     }
//   }

//   /* 清除浮动代码 */
//   .clearfloat::after {
//     display: block;
//     clear: both;
//     content: "";
//     visibility: hidden;
//     height: 0;
//   }

//   .clearfloat {
//     zoom: 1;
//   }
// }
</style>
